<template>
   <!-- 内置组件,有一个is属性,用于指定渲染哪个组件 -->
    <!-- keep-alive里面不能放注释,用于保存切换组件之前的状态 -->
    <keep-alive>
    <component :is="views[activeIndex]"></component>
  </keep-alive>
  <!-- 使用defineModel来写的话,使用v-model默认传给modelValue,也可以自定义传abc -->
  <TabBar v-model="activeIndex">
  <!-- <TabBar v-model="activeIndex" v-model:abc="activeIndex"> -->
    <!-- $event代表事件更新之后传递过来的新值 -->
    <!-- <TabBar :modelValue="activeIndex" @update:modelValue="activeIndex=$event"> -->
    <TabBarItem icon="home">首页</TabBarItem>
    <TabBarItem icon="search">搜索</TabBarItem>
    <TabBarItem icon="friends">朋友</TabBarItem>
    <TabBarItem icon="set">设置</TabBarItem>
  </TabBar>
</template>

<script setup>
import Friends from './views/Friends.vue';
import HomeView from './views/HomeView.vue';
import Search from './views/Search.vue';
import Set from './views/Set.vue';
import {ref} from 'vue'
import TabBar from './componsnts/TabBar.vue';
import TabBarItem from './componsnts/TabBarItem.vue';

const activeIndex = ref(0)

const views = [HomeView,Search,Friends,Set]


</script>

<style scoped>

</style>
